<form *ngIf="form" [formGroup]="form">
    <div class="card">
        <div class="field grid p-fluid">
            <label htmlFor="hostname" class="col-12 md:col-2 md:m-0">Hostname</label>
            <div class="col-12 md:col-10">
                <input pInputText id="hostname" type="text" formControlName="hostname" />
            </div>
        </div>
        <div class="field grid p-fluid">
            <label htmlFor="ssid" class="col-12 md:col-2 md:m-0">Wi-Fi SSID</label>
            <div class="col-12 md:col-10 p-inputgroup">
                <input pInputText id="ssid" type="text" formControlName="ssid" />
                <p-button
                    icon="pi pi-search"
                    pp-button
                    (click)="scanWifi()"
                    [loading]="scanning"
                    pTooltip="Scan Wi-Fi"
                    tooltipPosition="left"></p-button>
            </div>
        </div>
        <div class="field grid p-fluid">
            <label htmlFor="wifiPass" class="col-12 md:col-2 md:m-0">Wi-Fi Password</label>
            <div class="col-12 md:col-10 p-input-icon-right">
                <i *ngIf="form.get('wifiPass')?.dirty" class="pi cursor-pointer"
                    [ngClass]="{'pi-eye': !showWifiPassword, 'pi-eye-slash': showWifiPassword}"
                    (click)="toggleWifiPasswordVisibility()"></i>
                <input pInputText id="wifiPass" formControlName="wifiPass"
                    [type]="showWifiPassword ? 'text' : 'password'"
                    placeholder="Enter Wi-Fi password" />
            </div>
        </div>

        <div class="flex mt-5 gap-3">
            <button pButton [disabled]="!form.dirty || form.invalid" (click)="updateSystem()"
                class="btn btn-primary">Save</button>
            <button pButton [disabled]="!savedChanges" (click)="restart()">Restart</button>
        </div>
    </div>
</form>
